前幾天給按鈕加上一些互動效果了，今天回到介紹頁，原先介紹頁的設計有橫向排版，不過因為手機的畫面比較窄，會讓一些物件被拉長。
今天想讓排版自適應螢幕大小，這裡先不考慮需要安裝的Bootstrap，試著只用CSS做出效果。

接下來會用到media query，它能根據不同裝置的螢幕大小做出調整，CSS裡可以用@media依需要的條件來改變樣式。
在使用media query記得先在HTML裡加入下面這行內容，來告訴瀏覽器將頁面寬度設為螢幕寬度。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

設定完後回到我們的需求，如果水平排列物件會被拉長，那就在螢幕不夠寬的時候改為垂直排列。

@media screen and (max-width: 767px){
  .member-w{
    flex-direction: column;
  }
}

這裡的max-width是畫面可以達到的最大寬度，代表<=時套用；min-width則相反，代表>=時套用。
兩個條件可以同時存在，用and來連接。

@media screen and (max-width: px) and (min-width: px)

最後同理，把其他會因螢幕大小改變而跑版的部分稍作修改就好。

參考資料/延伸閱讀

1. oxxostudio
2. MDN-@media